<template>
	<view class="">
		<uni-popup ref="popup" type="center">
			<view class="popup-box" :style="popupStyle?popupStyle:''">
				<view v-if="popupTitle" class="row cut-border pl-15 pt-10 pb-10">
					<view class="col-auto">
						<view class="row">
							<view class="popup-title" >{{popupTitle}}</view>
						</view>
					</view>
					<view class="iconfont icon-close pointer popup-close-icon"  @click="closePopup()"></view>
				</view>
				<scroll-view scroll-y="true" class="scroll-view-y" :style="scrollStyle?scrollStyle:''">
					<view class="pd-30">
						<slot name='formItem'></slot>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "gt-form-popup",
		props: {
			popupTitle:{
				type:String,
				default:function(){
					return ''
				}
			},
			popupStyle:{
				type:String,
				default:function(){
					return ''
				}
			},
			scrollStyle:{
				type:String,
				default:function(){
					return ''
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			openPopup(){
				this.$refs.popup.open();
			},
			closePopup(){
				this.$refs.popup.close();
				this.$emit('close');
			}
		}
	}
</script>

<style>
	.popup-box{
		max-height: 80vh;
		max-width: 600px;
		width: 90vw;
		border-radius: 8px;
		background-color: #FFFFFF;
	}
	.scroll-view-y{
		max-height: calc(80vh - 121px);
	}
</style>
